<template>
  <div>
    <div v-show="edit">
      <template v-if="type==='input'">
        <el-input v-bind:value="data" placeholder="请输入" @input="editInput" clear ></el-input>
      </template>
      <template v-if="type==='select'">
        <el-select v-model="data" clearable filterable placeholder="请选择" @change="editInput" >
          <el-option
            v-for="item in listData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <template v-if="type==='time'" @change="editInput">
        <el-time-select
          v-model="data"
          :picker-options="{step: '00:15'}"
          placeholder="选择时间">
        </el-time-select>
      </template>
      <template v-if="type==='date'">
        <el-date-picker
          v-model="data"
          type="date"
          value-format="yyyy-MM-dd"
          @change="editInput"
          placeholder="选择日期">
        </el-date-picker>
      </template>
      <template v-if="type==='datetime'">
        <el-date-picker
          v-model="data"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="editInput"
          placeholder="选择日期时间">
        </el-date-picker>
      </template>
      <template v-if="type==='number'">
        <el-input-number v-model="data" @change="editInput" :min="1" ></el-input-number>
      </template>
    </div>
    <p v-show="!edit">
      {{data}}
    </p>
  </div>
</template>

<script>
export default {
  name: "EditCell",
  props: {
    edit: {
      type: Boolean,
      default: false,
      required: true
    },
    key: {
      type: String,
      default: ''
    },
    data: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'input'
    },
    listData: {
      type: Array,
      required: false,
      default: function (){
        return []
      }
    }
  },
  methods: {
    editInput(e) {
      this.$emit(`update:data`, e);
      let obj = {
        val: e,
        code: this.key
      }
      this.$emit(`ok`, obj)
    },
  },
}
</script>

<style scoped>

</style>
